<script setup lang="ts">
  import { reactive, ref, unref } from 'vue';
  import { addDocument } from '../../../api/table/document';
  const rules = {
    title: {
      required: true,
      message: '请输入文档标题',
      trigger: 'blur',
    },
    content: {
      required: true,
      message: '请输入文档内容',
      trigger: 'blur',
    },
    description: {
      required: true,
      message: '请输入文档描述',
      trigger: 'blur',
    },
  };
  const formRef: any = ref(null);
  const defaultValueRef = () => ({
    title: '',
    content: '',
    description: '',
  });
  let formValue = reactive(defaultValueRef());
  console.log(formValue);
  function resetForm() {
    formRef.value.restoreValidation();
    formValue = Object.assign(unref(formValue), defaultValueRef());
  }
</script>
<template>
  <div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-grid cols="1 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
        <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
          <n-form
            :label-width="80"
            :momdel="formValue"
            label-placement="left"
            :rules="rules"
            ref="formRef"
            class="py-8"
          >
            <n-form-item label="文档标题" path="title">
              <n-input v-model:value="formValue.title" placeholder="请输入文档标题" />
            </n-form-item>
            <n-form-item label="文档内容" path="content">
              <n-input
                type="textarea"
                v-model:value="formValue.content"
                placeholder="请输入文档内容"
              />
            </n-form-item>
            <n-form-item label="文档描述" path="description">
              <n-input v-model:value="formValue.description" placeholder="请输入文档描述" />
            </n-form-item>
            <div style="margin-left: 80px">
              <n-space>
                <n-button type="primary" @click="addDocument(formValue)">申请</n-button>
                <n-button @click="resetForm">重置</n-button>
              </n-space>
            </div>
          </n-form>
        </n-grid-item>
      </n-grid>
    </n-card>
  </div>
</template>
